<template>
  <n-modal
    :mask-closable="false"
    class="model"
    v-model:show="openDialog"
    preset="dialog"
    :show-icon="false"
    :on-close="closeBtn"
    transform-origin="center"
    style="background: #60676c; color: #fff; width: 700px"
  >
    <template #header>
      <div class="title-font">{{ dialogTitle }}</div>
    </template>
    <slot></slot>
    <div v-if="showCancel || showSave" class="footer">
      <n-button class="item-btn btn-border" @click="cancelBtn">取消</n-button>
      <n-button class="item-btn btn-bg" @click="saveBtn">保存</n-button>
    </div>
  </n-modal>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
const props = defineProps({
  showModal: {
    type: Boolean,
    default: false,
  },
  showCancel: {
    type: Boolean,
    default: false,
  },
  showSave: {
    type: Boolean,
    default: false,
  },
  dialogTitle: {
    type: String,
    default: "标题",
  },
});
const openDialog = computed(() => props.showModal);
const showCancel = computed(() => props.showCancel);
//关闭弹框
const closeBtn = () => {
  emits("closeModel", false);
};
const emits = defineEmits(["closeModel"]);
//取消
const cancelBtn = () => {
  emits("closeModel", false);
};
const saveBtn = () => {
  emits("closeModel", false);
};
</script>
<style lang="less" scoped>
.model {
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;

    .item-btn {
      width: 100px;
      height: 36px;
      font-size: 18px;
      color: #fff;
      margin-right: 30px;
    }

    .item-btn:last-child {
      margin-right: 0;
    }

    .btn-border {
      border: 1px solid #fff;
    }

    .btn-bg {
      background: #01c0e4;
    }

    :deep(.n-button) {
      --n-border: none !important;
      --n-border-hover: none !important;
      --n-border-focus: none !important;
    }
  }
}
</style>
